<template>
  <div class="">
    <h3>欢迎 {{ $store.state.user }}</h3>
    <button @click="exit">退出登陆</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    exit() {
      this.$store.commit("exit");
      this.$router.push("/login");
    },
  },
  components: {},
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      //加next的原因是 在这个导航守卫中 路由都还没跳转 实例也没创建 那么就不能拿到this来使用，在next方法中可以接收一个 回调函数作为参数 这个回调函数自带一个参数 vm代表这个组件实例
      if (vm.$store.state.user != "") {
        next();
      } else {
        next("/login");
      }
    });
  },
};
</script>

<style lang="scss"></style>
